<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;height: 56px;">
			<el-form :inline="true" :model="filters">
				<el-form-item label="申请人">
					<el-input v-model="filters.applicant" placeholder="申请人姓名" style="width: 130px;"></el-input>
				</el-form-item>
				<el-form-item label="会议室">
					<el-select v-model="filters.roomId" placeholder="请选择" style="width: 130px;" @change="fnChangeRoom">
						<el-option v-for="item in conferences" :key="item.ID" :label="item.Name" :value="item.ID"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="申请状态">
					<el-select v-model="filters.status" placeholder="请选择" style="width: 130px;" @change="fnChangeRoom">
						<el-option v-for="item in allStatus" :key="item.value" :label="item.label" :value="item.value"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="申请时间">
				    <el-date-picker v-model="filters.start" type="date" placeholder="开始日期" format="yyyy-MM-dd" @change="fnGetStart" style="width: 130px;"></el-date-picker>
				</el-form-item>
				<el-form-item label="至">
				    <el-date-picker v-model="filters.end" type="date" placeholder="结束日期" format="yyyy-MM-dd" @change="fnGetEnd" style="width: 130px;"></el-date-picker>
				</el-form-item>
				<el-form-item>
					<el-button type="info" @click="fnGetReviewList">查询</el-button>
				</el-form-item>
			</el-form>
		</el-col>
		
		<!--我的申请列表-->
		<el-table :data="reviewList" border v-loading="reviewListLoading" class="records-list m-l-3">
			<el-table-column type="index" label="#" width="60">
			</el-table-column>
			<el-table-column prop="RoomName" label="会议室" width="120">
			</el-table-column>
			<el-table-column label="申请人" min-width="200">
				<template scope="scope">
					<p>{{scope.row.DeptName}} -  {{scope.row.Applicant}}</p>
				</template>
			</el-table-column>
			<el-table-column label="会议时间" min-width="300">
				<template scope="scope">
					<p>{{scope.row.FromTime}} 至  {{scope.row.ToTime}}</p>
				</template>
			</el-table-column>
			<el-table-column prop="Status" label="申请状态" width="120">
			</el-table-column>
			<el-table-column prop="CreatedTime" label="申请时间" width="180">
			</el-table-column>
			<el-table-column label="操作" width="65">
				<template scope="scope">
				    <el-tooltip class="item" effect="dark" content="详情" placement="bottom">
				      	<el-button type="info" size="mini" icon="custom-detail"  @click="emitJumpPage(scope.row.ID)"></el-button>
				    </el-tooltip>
				</template>
			</el-table-column>
		</el-table>
		
		<!--工具条-->
		<el-col :span="24" class="toolbar">
			<el-pagination layout="total, prev, pager, next" @current-change="fnPaginationChange" :page-size="size" :total="total" style="float:right;">
			</el-pagination>
		</el-col>

	</section>
</template>

<script>
	import Vue from 'vue'
	import Svc from '../../service/index.js'
	import moment from 'moment'
	export default {
		data() {
				return {
					//所有会议室
					conferences : [{
						Name : '全部',
						ID : 0
					}],
					//所有状态
					allStatus : [{
						label : '待审核',
						value : 0
					},{
						label : '已通过',
						value : 1
					},{
						label : '已驳回',
						value : 2
					},{
						label : '已取消',
						value : 3
					},{
						label : '全部',
						value : 99
					}],
					total:0,
					skip:0,
					size:20,
					filters : {
						applicant : '',
						roomId :0,
						status : 0,
						start : '',
						end : ''
					},
					reviewListLoading : false,
					reviewList : []
				}
			},
			methods: {
				//自定义事件->组件跳转
				emitJumpPage(id){
					this.$emit('jump-page',id,false,'review-detail')
				},
	            //显示message提示框
	            openMessage : function(msg,type){
	    	        this.$message({
			          	showClose: true,
			          	message: msg,
			          	type: type
			        });
			    },
			    //获取所有会议室
			    fnGetConference(){
			    	var that = this
		            Svc.fnGetData('/api/mroom/room/fetch',{},function(res){
		            	if (res.body.ErrCode == 0){
		            		that.conferences = that.conferences.concat(res.body.Data)
		            	} else {
		            		that.openMessage("会议室获取失败！",'error')
		            	}
		            },function(res){
		            	that.openMessage("网络错误，请重新！",'error')
		            })
			    },
			    //获取开始日期
				fnGetStart(val){
					if (val) {
						this.filters.start = val + " " + "00:00:00"
					} else {
						this.filters.start = val
					}
				},
				//获取结束日期
				fnGetEnd(val){
					if (val) {
						this.filters.end = val + " " + "23:59:59"
					} else {
						this.filters.end = val
					}
				},
				//获取审核记录
			    fnGetReviewList(){
			    	var that = this
			    	that.reviewListLoading = true
			    	var params = {
			    		Applicant : that.filters.applicant,
			    		RoomID : that.filters.roomId,
			    		Status : that.filters.status,
						CreatedTimeFrom : that.filters.start,
						CreatedTimeTo : that.filters.end,
						Skip: that.skip*that.size,
						Size: that.size
			    	}
		            Svc.fnPostData('/api/mroom/appointment/search',params,function(res){
		            	if (res.body.ErrCode == 0){
		            		that.reviewList = res.body.Data.List
		            		that.total = res.body.Data.Total
		            	} else {
		            		that.openMessage("我的申请记录获取失败！",'error')
		            	}
		            	that.reviewListLoading = false
		            },function(res){
		            	that.openMessage("网络错误，请重新！",'error')
		            })
			    }
			},
			mounted() {
				//获取所有会议室
			    this.fnGetConference()
				//获取审核记录
			    this.fnGetReviewList()
			}
	}
</script>

<style scoped>
	.toolbar {
	    background: #f2f2f2;
	    padding: 10px;
	    margin: 10px 0;
	}
</style>